These two snippets highlight the current page in your CSS navigation using a simple unordered list which can be styled with whatever CSS you want for your navigation.

For this you need the two snippets (a HTML list) for your navigation and the PHP snippet, along with some CSS of your choice to style the list.

For basic usage, make up your HTML navigation list of your pages using a simple unordered list of your pages. Save your list 'menu.html' to an appropriate location (obviously, depending on its location, you may need to change the location for the $menu variable in the PHP. The preg_replace finds the current page, strips out the 'a' tags to remove the link from the current page, and adds in your id. The id can be renamed if necessary or changed to a class.

In the CSS example I've used the 'current' ID is used to highlight the current page.

To display the navigation, simply call the list with a PHP include, and there's your navigation, styled to your liking with whatever CSS you want to use (just remember to use the 'current' id!

Code originally from "Showing current page" on bonrouge.com: http://bonrouge.com/~current2


=====================================================

## SNIPPET 1 - THE PHP ## // I usually save this file in my 'includes' directory as "nav_include.php"

<?php
$menu=file_get_contents("includes/menu.html"); // get the navigation list of pages
$base=basename($_SERVER['PHP_SELF']); // get the current page
$menu=preg_replace("|<li><a href=\"".$base."\">(.*)</a></li>|U", "<li id=\"current\">$1</li>", $menu); // add an id of 'active' to the link and id of class to the list item for the current page 
echo $menu; // echo the HTML list with the current page highlighted
?>

## SNIPPET 2 - THE HTML LIST ##

<ul id="navlist">
  <li><a href="index.php">Home</a></li>
  <li><a href="products.php">Products</a></li>
  <li><a href="services.php">Services</a></li>
  <li><a href="about.php">About Us</a></li>
  <li><a href="contact.php">Contact Us</a></li>
</ul>

## CSS ##

#navlist { margin: 0; padding: 30px 0 20px 10px; float: right; width: 60%; }
#navlist ul, #navlist li { margin: 0; padding: 0; display: inline; list-style-type: none; }
#navlist a:link, #navlist a:visited { float: left; line-height: 14px; font-weight: bold; margin: 0 10px 4px; text-decoration: none; color: #4F4F4F; width: auto; } /* link and visited link styles - the visited state can be styled separately if you wish */
#navlist a:link#current, #navlist a:visited#current, #navlist a:hover { border-bottom: 4px solid #66733f; padding-bottom: 2px; background: transparent; color: #4F4F4F; } /* this line's the style for the current page link */
#navlist a:hover { border-bottom: 4px solid #4F4F4F; color: #4F4F4F; } /* hover state for all the links */

## TO DISPLAY ON THE PAGE ##

<?php include("includes/nav_include.php"); ?>